<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <button @click="prevPage">上一页</button>
    <div>
        <img :src="list[index]" alt="图片"/>
    </div>
    <button @click="nextPage">下一页</button>
</div>

<script src="../vue.global.js"></script>

<script>
    const {createApp, ref} = Vue;

    createApp({
        setup() {
            const index = ref(0);
            const list = [
                '../image/1-01.webp',
                '../image/1-02.webp',
                '../image/1-03.webp',
                '../image/1-04.webp',
                '../image/1-05.webp',
            ];

            const prevPage = () => {
                if (index.value > 0) {
                    index.value--;
                }
            };

            const nextPage = () => {
                if (index.value < list.length - 1) {
                    index.value++;
                }
            };

            return {index, list, prevPage, nextPage};
        }
    }).mount('#app');
</script>


</body>
</html>